<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!--调整缩放，方便移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>

    <!--semantic ui 的 css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

    <!--自己定义的 css-->
    <link rel="stylesheet" href="../static/css/me.css">

    <!--typo.css 的 css-->
    <link rel="stylesheet" href="../static/css/typo.css">

    <!--animate.css 的 css-->
    <link rel="stylesheet" href="../static/css/animate.min.css">

    <!--prism 的 css-->
    <link rel="stylesheet" href="../static/lib/prism/prism.css">

    <!--tocbot 的 css-->
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">

</head>
<body>
<!--导航-->
<!--
    inverted : 颜色反转，加上就是黑色
    attached : 贴附，加上导航条就没有圆角
    m-padded-tb-mini : 自定义的 css ，表示导航栏菜单的上下内间距调整小一点
    segment : 一条类似导航栏的带子
-->
<nav th:replace="_fragments :: menu(1)" class="ui inverted segment attached m-padded-tb-mini m-shadow-small">
    <!--放在 container 里可以让四周都留点空隙-->
    <div class="ui container">
        <!--
            secondary : 相当于一个背景色的样式
            stackable : 表示可堆叠的，在移动端时，里面的元素会有序堆在一起，一般与 menu ，grid 等连用
        -->
        <div class="ui inverted secondary stackable menu">
            <!--teal : 相当于一个字体颜色，绿色-->
            <h2 class="ui teal header item">Blog</h2>
            <!--在 ws 中可以快速写标签，例如： i.home.icon + tab键 = <i class="home icon"></i>-->
            <!--
                item : 与上面的 menu 相对应
                m-mobile-hide : 自定义的 css ，在移动端时隐藏
                m-item : 没有任何样式作用，仅用于 js 作为选择器
            -->
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>

            <!--
                right item : 表示靠右
            -->
            <div class="right item m-mobile-hide">
                <!--
                    ui icon input : 表示一个带图标的输入框，可用于搜索框
                    transparent : 表示背景是透明的
                    inverted : 因为上面是黑色的，所以这里也要反转，要不然看不见
                -->
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="搜索...">
                    <!--
                        link : 表示可以点击跳转
                    -->
                    <i class="search link icon"></i>
                </div>
            </div>

        </div>
    </div>

    <!--用于移动端折叠导航栏的按钮-->
    <!--
        m-right-top : 自定义的 css，将元素至于右上角
        m-mobile-show : 自定义的 css ，在移动端时显示，在通常情况下隐藏
        menu toggle : 没有任何样式作用，仅用于 js 作为选择器
    -->
    <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>

<!--中间内容-->
<!--
    m-container : 自定义css，使其比原定的 container 窄
    animate__animated : animate.css 的 基本样式，由于版本问题，多了一个 animate__ 的前缀
    animate__fadeIn ： animate.css 的 渐进动画
-->
<div id="waypoint" class="m-container-small m-padded-tb-big animate__animated animate__fadeIn">
    <!--
        container : 使里面的内容有响应式效果
    -->
    <div class="ui container">
        <!--头部区域-->
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <!--
                        avatar : 头像图片样式
                    -->
                    <img src="https://picsum.photos/id/1/100/100" th:src="@{${blog.user.avatar}}" class="ui avatar image">
                    <!--
                        content : 图片后面的文字内容
                    -->
                    <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">名字</a></div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2017-10-01</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i><span th:text="${blog.views}">2341</span>
                </div>
            </div>
        </div>

        <!--图片区域-->
        <div class="ui attached segment">
            <img src="https://picsum.photos/id/1/800/450" th:src="@{${blog.firstPicture}}" class="ui fluid rounded image">
        </div>
        <!--内容区域-->
        <div class="ui attached padded segment">
            <!--右上角的 原创/转载 标签-->
            <div class="ui right aligned basic segment">
                <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
            </div>

            <!--文章标题-->
            <h2 class="ui center aligned header" th:text="${blog.title}">关于刻意练习的清单</h2>

            <br>

            <!--正文内容-->
            <!--
                m-padded-lr-reponsive : 自定义的 css ，响应式，在通常情况下增大内间距，在移动端时，恢复原来的内边距（变小）
                th:utext="${blog.content}" ： 这里的内容不要转为纯文本，直接替换即可
            -->
            <div id="content" class="js-toc-content typo m-padded-lr-reponsive m-padded-tb-large" th:utext="${blog.content}">
                <p>##用户名：admin
                    ##密码：123456</p>
                <h1 id="my-blog">My Blog</h1>
                <p><img src="static-files/personal-blog.png" alt="personal-blog"/></p>
                <p><strong>坚持不易，各位朋友如果觉得项目还不错的话可以给项目一个 star 吧，也是对我一直更新代码的一种鼓励啦，谢谢各位的支持。</strong></p>
                <p><img src="static-files/my-blog-info.png" alt="my-blog-info"/></p>
                <ul>
                    <li><strong>你可以拿它作为博客模板，因为 My Blog 界面十分美观简洁，满足私人博客的一切要求；</strong></li>
                    <li><strong>你也可以把它作为 SpringBoot 技术栈的学习项目，My Blog也足够符合要求，且代码和功能完备；</strong></li>
                    <li><strong>内置三套博客主题模板，主题风格各有千秋，满足大家的选择空间，后续会继续增加，以供大家打造自己的博客；</strong></li>
                    <li><strong>技术栈新颖且知识点丰富，学习后可以提升大家对于知识的理解和掌握，对于提升你的市场竞争力有一定的帮助。</strong></li>
                </ul>
                <blockquote>
                    <p>更多 Spring Boot 实战项目可以关注十三的另一个代码仓库 <a href="https://github.com/ZHENFENG13/spring-boot-projects">spring-boot-projects</a>，该仓库中主要是
                        Spring Boot 的入门学习教程以及一些常用的 Spring Boot 实战项目教程，包括 Spring Boot
                        使用的各种示例代码，同时也包括一些实战项目的项目源码和效果展示，实战项目包括基本的 web
                        开发以及目前大家普遍使用的前后端分离实践项目等，后续会根据大家的反馈继续增加一些实战项目源码，摆脱各种 hello world 入门案例的束缚，真正的掌握 Spring Boot 开发。
                    </p>
                </blockquote>
                <h2 id="注意事项">注意事项</h2>
                <ul>
                    <li><strong>数据库文件目录为<code>static-files/my_blog_db.sql</code>；</strong></li>
                    <li><strong>部署后你可以根据自己需求修改版权文案、logo 图片、备案记录等网站基础信息；</strong></li>
                    <li><strong>My Blog 后台管理系统的默认登陆账号为 admin 默认登陆密码为 123456；</strong></li>
                    <li><strong>layui 版本的 My-Blog，仓库地址 <a href="https://github.com/ZHENFENG13/My-Blog-layui">My-Blog-layui</a>
                        ，感兴趣的朋友也可以学习一下；</strong></li>
                    <li><strong>My Blog 还有一些不完善的地方，鄙人才疏学浅，望见谅；</strong></li>
                    <li><strong>有任何问题都可以反馈给我，我会尽量完善该项目。</strong></li>
                </ul>
                <p>演示视频：https://www.bilibili.com/video/av52551095
                    演示站点：http://13blog.site</p>
                <p><a href="https://travis-ci.org/ZHENFENG13/My-Blog"><img
                        src="https://travis-ci.org/ZHENFENG13/My-Blog.svg?branch=master" alt="Build Status"/></a>
                    <img src="https://img.shields.io/badge/version-4.0.0-yellow.svg" alt="Version 4.0.0"/>
                    <a href="https://github.com/ZHENFENG13/My-Blog/blob/master/LICENSE"><img
                            src="https://img.shields.io/badge/license-apache-blue.svg" alt="License"/></a></p>
                <h2 id="开发文档">开发文档</h2>
                <h3 id="springboot--mybatis--thymeleaf-搭建美观实用的个人博客支付减免优惠券码-lsjdk3kt-">《SpringBoot + Mybatis + Thymeleaf
                    搭建美观实用的个人博客》(支付减免优惠券码 LSJdK3KT )</h3>
                <p><a href="https://www.shiyanlou.com/courses/1367"><img
                        src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/poster/store/lesson-03.png"
                        alt="lesson-03"/></a></p>
                <ul>
                    <li><a href="https://www.shiyanlou.com/courses/1367"><strong>第01课：Spring Boot
                        搭建简洁实用的个人博客系统导读</strong></a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第02课：快速构建 Spring Boot 应用</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第03课：Spring Boot 项目开发之web项目开发讲解</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第04课：Spring Boot 整合 Thymeleaf 模板引擎</a></li>
                    <li><a href="https://www.shiyanlou.com/courses">第05课：Spring Boot 处理文件上传及路径回显</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第06课：Spring Boot 自动配置数据源及操作数据库</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第07课：Spring Boot 整合 MyBatis 操作数据库</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第08课：Mybatis-Generator 自动生成代码</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第09课：Spring Boot 中的事务处理</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第10课：Spring Boot 项目实践之 Ajax 技术使用教程</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第11课：Spring Boot 项目实践之 RESTful API 设计与实现</a>
                    </li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第12课：Spring Boot 博客系统项目开发之分页功能实现</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第13课：Spring Boot 博客系统项目开发之验证码功能</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第14课：Spring Boot 博客系统项目开发之登录模块实现</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第15课：Spring Boot 博客系统项目开发之登陆拦截器</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第16课：Spring Boot 博客系统项目开发之分类功能实现</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第17课：Spring Boot 博客系统项目开发之标签功能实现</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第18课：Spring Boot 博客系统项目开发之文章编辑功能</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第19课：Spring Boot 博客系统项目开发之文章编辑完善</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第20课：Spring Boot 博客系统项目开发之文章模块实现</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第21课：Spring Boot 博客系统项目开发之友链模块实现</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第22课：Spring Boot 博客系统项目开发之网站首页制作</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第23课：Spring Boot 博客系统项目开发之分页及侧边栏制作</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第24课：Spring Boot 博客系统项目开发之搜索页面制作</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第25课：Spring Boot 博客系统项目开发之文章详情页制作</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第26课：Spring Boot 博客系统项目开发之错误页面制作</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第27课：Spring Boot 博客系统项目开发之评论功能实现</a></li>
                    <li><a href="https://www.shiyanlou.com/courses/1367">第28课：Spring Boot 博客系统项目开发之项目打包部署</a></li>
                </ul>
                <h2 id="联系作者">联系作者</h2>
                <blockquote>
                    <p>大家有任何问题或者建议都可以在 <a href="https://github.com/ZHENFENG13/My-Blog/issues">issues</a>
                        中反馈给我，我会慢慢完善这个项目。</p>
                </blockquote>
                <ul>
                    <li>我的邮箱：2449207463@qq.com</li>
                    <li>QQ技术交流群：796794009 881582471 658365129(已满)</li>
                </ul>
                <h2 id="效果预览">效果预览</h2>
                <h3 id="后台管理页面">后台管理页面</h3>
                <ul>
                    <li>
                        <p>登录页</p>
                        <p><img src="static-files/login.png" alt="login"/></p>
                    </li>
                    <li>
                        <p>后台首页</p>
                        <p><img src="static-files/dashboard.png" alt="dashboard"/></p>
                    </li>
                    <li>
                        <p>文章管理</p>
                        <p><img src="static-files/blog-list.png" alt="blog-list"/></p>
                    </li>
                    <li>
                        <p>文章编辑</p>
                        <p><img src="static-files/edit.png" alt="edit"/></p>
                    </li>
                    <li>
                        <p>评论管理</p>
                        <p><img src="static-files/comment-list.png" alt="comment-list"/></p>
                    </li>
                    <li>
                        <p>系统配置</p>
                        <p><img src="static-files/config.png" alt="config"/></p>
                    </li>
                </ul>
                <h3 id="博客展示页面">博客展示页面</h3>
                <p>开发时，在项目中<strong>内置了三套博客主题模板，主题风格各有千秋</strong>，效果如下：</p>
                <h4 id="模板一">模板一</h4>
                <ul>
                    <li>
                        <p>首页</p>
                        <p><img src="static-files/index01.png" alt="index01"/></p>
                    </li>
                    <li>
                        <p>文章浏览</p>
                        <p><img src="static-files/detail01.png" alt="detail01"/></p>
                    </li>
                    <li>
                        <p>友情链接</p>
                        <p><img src="static-files/link01.png" alt="link01"/></p>
                    </li>
                </ul>
                <h4 id="模板二">模板二</h4>
                <ul>
                    <li>
                        <p>首页</p>
                        <p><img src="static-files/index02.png" alt="index02"/></p>
                    </li>
                    <li>
                        <p>文章浏览</p>
                        <p><img src="static-files/detail02.png" alt="detail02"/></p>
                    </li>
                    <li>
                        <p>友情链接</p>
                        <p><img src="static-files/link02.png" alt="link02"/></p>
                    </li>
                </ul>
                <h4 id="模板三">模板三</h4>
                <ul>
                    <li>
                        <p>首页</p>
                        <p><img src="static-files/index03.png" alt="index03"/></p>
                    </li>
                    <li>
                        <p>文章浏览</p>
                        <p><img src="static-files/detail03.png" alt="detail03"/></p>
                    </li>
                    <li>
                        <p>友情链接</p>
                        <p><img src="static-files/link03.png" alt="link03"/></p>
                    </li>
                </ul>
                <h2 id="感谢">感谢</h2>
                <ul>
                    <li><a href="https://github.com/spring-projects/spring-boot">spring-projects</a></li>
                    <li><a href="https://github.com/ColorlibHQ/AdminLTE">ColorlibHQ</a></li>
                    <li><a href="https://github.com/tonytomov/jqGrid">tonytomov</a></li>
                    <li><a href="https://github.com/pandao/editor.md">pandao</a></li>
                    <li><a href="https://github.com/DONGChuan/Yummy-Jekyll">DONGChuan</a></li>
                    <li><a href="https://github.com/zjhch123/solo-skin-amaze">zjhch123</a></li>
                    <li><a href="https://github.com/t4t5/sweetalert">t4t5</a></li>
                </ul>
            </div>

            <!--标签-->
            <div class="m-padded-lr-reponsive">
                <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</div>
            </div>

            <!--赞赏-->
            <div class="ui center aligned basic segment">
                <!--
                    circular : 按钮的大圆角样式
                -->
                <button id="payButton" class="ui orange basic circular button">赞赏</button>
            </div>
            <!--
                payQR : 没有任何样式作用，仅用于 js 作为选择器
            -->
            <div class="ui payQR flowing popup transition hidden">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit">
                        <div class="image">
                            <!--
                                bordered : 给图片加上边线
                            -->
                            <img src="../static/images/QRcode.png" th:src="@{/images/QRcode.png}" class="ui rounded bordered image"
                                 style="width: 120px">
                            <div>支付宝</div>
                        </div>
                        <div class="image">
                            <img src="../static/images/QRcode.png" th:src="@{/images/QRcode.png}" class="ui rounded bordered image"
                                 style="width: 120px">
                            <div>微信</div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <!--博客信息-->
        <!--
            message : 相当于边框和背景都带有颜色的 segment
            positive : 将 message 变为绿色
        -->
        <div class="ui attached message positive">
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ul class="list">
                        <li>作者：<span th:text="${blog.user.nickname}">名字</span><a href="#" th:href="@{/about}" target="_blank">（联系作者）</a></li>
                        <li>发表时间：<span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd HH:mm')}"></span></li>
                        <li>版权声明</li>
                        <li>公众号转载</li>
                    </ul>
                </div>
                <div class="five wide column">
                    <!--
                        right floated : 往右浮动，图片相对于上一层 div 靠右显示
                    -->
                    <img src="../static/images/QRcode.png" th:src="@{/images/QRcode.png}" class="ui rounded right floated bordered image"
                         style="width: 110px">
                </div>
            </div>
        </div>

        <!--留言区域-->
        <div class="ui bottom attached segment">
            <!--留言区域列表-->
            <div id="comment-container" class="ui teal segment">
                <div th:fragment="commentList">
                    <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>
                        <div class="comment" th:each="comment : ${comments}">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1/100/100" th:src="@{${comment.avatar}}">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <span th:text="${comment.nickname}">Matt</span>
                                    <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主</div>
                                </a>
                                <div class="metadata">
                                    <span class="date" th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                </div>
                                <div class="text" th:text="${comment.content}">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <!--
                                        自定义属性不能有大写，否则拿不到
                                    -->
                                    <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id}, data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            <div class="comments" th:if="${#arrays.length(comment.replyComments)} > 0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/1/100/100" th:src="@{${reply.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <!--
                                                m-teal : 自定义的 css
                                            -->
                                            <span th:text="${reply.nickname}">小青</span>
                                            <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div>
                                            &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>                                        </a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(reply.createTime, 'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            How artistic!
                                        </div>
                                        <div class="actions">
                                            <!--
                                                自定义属性不能有大写，否则拿不到
                                            -->
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id}, data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/*-->
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1/100/100">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/1/100/100">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1/100/100">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <!--*/-->
                    </div>
                </div>

            </div>

            <!--
                form : 类似于 form 标签，只不过带有样式，响应式
            -->
            <!--提交留言区域-->
            <div id="comment-form" class="ui form">
                <input type="hidden" name="blog.id" th:value="${blog.id}">
                <!--
                    value="-1" : 先给一个初始值 -1
                -->
                <input type="hidden" name="parentComment.id" value="-1">
                <!--
                    field : 表示放置表单的区域
                -->
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <!--
                    fields : 在一行当中放做个 field
                -->
                <div class="fields">
                    <!--
                        m-mobile-wide : 自定义的 css ，在移动端时，会将宽度填满
                        m-margin-bottom-small ： 自定义的 css ，底部外间距加大
                    -->
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <!--
                            left icon input : 在输入框的左边可以放置图标
                        -->
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="nickname" placeholder="姓名" th:value="${session.user} != null ? ${session.user.nickname}">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱" th:value="${session.user} != null ? ${session.user.email}">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!--右下角的小工具条-->
<!--
    垂直的 button 组
    默认隐藏
    m-fixed m-right-bottom : 自定义的 css ，相对固定在右下角
-->
<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui teal button">留言</a>
        <button class="ui wechat icon button"><i class="weixin icon"></i></button>
        <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
    </div>
</div>

<!--弹出目录容器-->
<div class="ui toc-container flowing popup transition hidden" style="width: 250px !important">
    <!--目录容器-->
    <ol class="js-toc">

    </ol>
</div>

<!--弹出微信二维码容器-->
<div id="qrcode" class="ui wechat-qr flowing popup transition hidden" style="width: 130px !important;">
    <!--        <img src="static/images/QRcode.png" alt="" class="ui rounded image" style="width: 120px">-->
</div>

<br>
<br>

<!--底部 footer-->
<!--
    vertical : 垂直，加上没有圆角
    m-padded-tb-massive : 自定义 css，使整个 footer 的内间距变大
-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <!--
        center aligned : 里面所有元素居中
    -->
    <div class="ui center aligned container">
        <!--
            grid : 类似于 bootstrap 中的 row，bootstrap 中 把一行分成 12 列，这里分成 16 列
            divided : 每列之间加上分割线
            inverted : 因为背景是反转色，所以这里也反转
        -->
        <div class="ui inverted divided stackable grid">
            <!--二维码图片-->
            <!--
                wide : 宽度填满
            -->
            <div class="three wide column">
                <!--把图片放在 list 里，使图片能居中-->
                <div class="ui inverted link list">
                    <div class="item">
                        <!--
                            rounded : 圆角的
                        -->
                        <img src="../static/images/QRcode.png" class="ui rounded image" style="width: 110px">
                    </div>
                </div>
            </div>
            <!---->
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <!--
                    list : 里面的元素呈列表样式
                -->
                <div class="ui inverted link list">
                    <!--
                        item : 与上面的 list 相对应
                    -->
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <!--
                    list : 里面的元素呈列表样式
                -->
                <div class="ui inverted link list">
                    <!--
                        item : 与上面的 list 相对应
                    -->
                    <a href="#" class="item">Email: dfasdog@qq.com</a>
                    <a href="#" class="item">QQ: 13355767653</a>
                </div>
            </div>
            <div class="seven wide column">
                <!--加上自定义样式-->
                <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                <!--加上自定义样式-->
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话</p>
            </div>
        </div>
        <!--分割线-->
        <!--
            divider : 与上面的 divided 区别开
        -->
        <div class="ui inverted section divider"></div>
        <!--加上自定义样式-->
        <p class="m-text-thin m-text-spaced m-opacity-tiny">版权内容版权内容版权内容版权内容版权内容</p>
    </div>
</footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!--jquery 的 js-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

<!--semantic ui 的 js-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<!--jquery.scrollTo 的 js-->
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>

<!--prism 的 js-->
<script src="../static/lib/prism/prism.js"></script>

<!--tocbot 的 js-->
<script src="../static/lib/tocbot/tocbot.min.js"></script>

<!--qrcode 的 js-->
<script src="../static/lib/qrcode/qrcode.min.js"></script>

<!--qrcode 的 js-->
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>
<!--/*/</th:block>/*/-->

<!--自定义的 js-->
<!--
    th:inline="javascript" : 使下面才有效
-->
<script th:inline="javascript">

    // 顶部导航栏折叠
    $('.menu.toggle').click(function () {
        // 如果类中有 m-mobile-hide ，则去掉，否则加上
        $('.m-item').toggleClass('m-mobile-hide');
    });

    // 弹出类似对话气泡的框
    $('#payButton').popup({         // 选择触发按钮
        popup: $('.payQR.popup'),   // 选择被触发的元素
        on: 'click',                // 触发条件
        position: 'bottom center'   // 出现位置
    });

    // 弹出目录
    $('.toc.button').popup({         // 选择触发按钮
        popup: $('.toc-container.popup'),   // 选择被触发的元素
        on: 'click',                // 触发条件
        position: 'top right'   // 出现位置
    });

    // 初始化 tocbot 目录
    tocbot.init({
        tocSelector: '.js-toc',        // 目录容器（选择器）
        contentSelector: '.js-toc-content',    // 需要生成目录的源（选择器）
        headingSelector: 'h1, h2, h3'   // 需要生成目录的级别
    });

    // 弹出微信二维码
    $('.wechat').popup({         // 选择触发按钮
        popup: $('.wechat-qr'),   // 选择被触发的元素
        on: 'hover',                // 触发条件，默认为 hover
        position: 'left center'   // 出现位置
    });

    // 生成二维码
    // /*[[@{/blog/{id}(id=${blog.id})}]]*/ : 在 js 中是注释，在 thymeleaf 中有用； [[]] 是在 js 中插入 thymeleaf 语句，后面加的 '' 是为了防止报错
    var serurl = 'http://127.0.0.1:8080';       // 服务器地址
    var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
    var qrcode = new QRCode(document.getElementById("qrcode"),     // 生成二维码元素容器的 id
        {
            text: serurl + url,       // 需要生成二维码的网址
            width: 110,     // 图片的宽度
            height: 110,    // 图片的高度
            colorDark: "#000000",       // 二维码的浅色的颜色
            colorLight: "#ffffff",      // 二维码的深色的颜色
            correctLevel: QRCode.CorrectLevel.H
        }
    );

    // 平滑滚动顶部
    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 500);      // (目的位置[,动画时间][,更多设置])，一般填前两个
    });

    // 滚动监测
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),   // 需要监测的元素 id
        handler: function (direction) {                 // 回调函数，direction 是一个方向值（up, down）
            // 当向下滚动时，隐藏右下角工具条，当向上滚动时，显示右下角工具条
            if (direction == 'down') {
                $('#toolbar').show(100);
            } else {
                $('#toolbar').hide(100);
            }
        }
    });

    // 评论表单验证
    $('.ui.form').form({
        fields: {
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }]
            },
            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的大名'
                }]
            },
            email: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });

    // 首次加载评论区
    $(function () {
        $('#comment-container').load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"");
    });

    // 评论发布按钮的点击事件
    $('#commentpost-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        if(boo){
            console.log('校验成功');
            postData()
        }else{
            console.log('校验失败');
        }
    });

    // 评论表单提交并刷新评论区
    function postData() {
        $('#comment-container').load(/*[[@{/comments}]]*/"", {
            "parentComment.id": $("[name='parentComment.id']").val(),
            "blog.id": $("[name='blog.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "email": $("[name='email']").val(),
            "content": $("[name='content']").val()
        }, function (responseTxt, statusTxt, xhr) {     // 回调函数
            $(window).scrollTo($('#comment-container'), 100);
            clearContent();
        });
    }

    // 因为是局部加载的，所以要在评论提交后还原评论表单
    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentComment.id']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息...");
    }

    // 回复操作（回复按钮的点击事件）
    function reply(obj) {
        // 获取被回复者的信息
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();   // 在评论框中显示 @某某
        $("[name='parentComment.id']").val(commentId); // 设定隐藏域的值
        $(window).scrollTo($('#comment-form'), 100);
    }

</script>
</body>
</html>